<template>
	<div class="test-area">
		<el-form :model="ruleForm" :inline="true" :rules="required ? rules : null" ref="ruleForm" class="test-area-form">
			<el-form-item prop="grade">
				<el-select v-model="ruleForm.grade" @focus="getGrade" @change="getSubject" placeholder="请选择年级">
					<el-option v-for="item in gradeData" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="subject">
				<el-select v-model="ruleForm.subject" @change="getEdition" placeholder="请选择科目">
					<el-option v-for="item in subjectData" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="edition">
				<el-select v-model="ruleForm.edition" @change="getMaterial" placeholder="请选择版本">
					<el-option v-for="item in editionData" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="material">
				<el-select v-model="ruleForm.material" placeholder="请选择教材">
					<el-option v-for="item in materialData" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
export default {
	props: {
		required: {
			required: false,
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			ruleForm: {
				grade: '',
				subject: '',
				edition: '',
				material: ''
            },
			edit: {
				grade: '',
				subject: '',
				edition: '',
				material: ''
			},            
			rules: {
				grade: [{ required: true, message: '请选择年级', trigger: 'change' }],
				subject: [{ required: true, message: '请选择科目', trigger: 'change' }],
				edition: [{ required: true, message: '请选择版本', trigger: 'change' }],
				material: [{ required: true, message: '请选择教材', trigger: 'change' }]
			},
			gradeUrl: ['api/org/org', 'api/newlevel/platform_org'],
			subjectUrl: ['api/cate/subject', 'api/newlevel/platform_subject'],
			editionUrl: ['api/cate/version', 'api/cate/version'],
			materialUrl: ['api/cate/material', 'api/newlevel/platform_material'],
			gradeData: [],
			subjectData: [],
			editionData: [],
			materialData: []
		};
    },
	computed: {
		CheckSchoolAppCode() {
			let code = sessionStorage.getItem('CheckSchoolAppCode');
			return code ? code : '00000000000000000000000000000000';
		},
		inx() {
			return this.$store.getters.isMulti ? 1 : 0;
		},
		gradeParams() {
			return [
				{
					level: 3,
					direction: 'balance'
				},
				{
					level: 3,
					direction: 'balance',
					status: 1,
					app_code: this.CheckSchoolAppCode
				}
			];
		},
		subjectParams() {
			return [
				{
					type: 2,
					org_id: this.ruleForm.grade,
					status: 1
				},
				{
					type: 2,
					org_id: this.ruleForm.grade,
					status: 1,
					app_code: this.CheckSchoolAppCode
				}
			];
		},
		editionParams() {
			return [
				{
					type: 2,
					org_id: this.ruleForm.grade,
					sub_id: this.ruleForm.subject,
					status: 1
				},
				{
					type: 2,
					org_id: this.ruleForm.grade,
					sub_id: this.ruleForm.subject,
					status: 1
				}
			];
		},
		materialParams() {
			return [
				{
					org_id: this.ruleForm.grade,
					sub_id: this.ruleForm.subject,
					ver_id: this.ruleForm.edition,
					status: 1
				},
				{
					org_id: this.ruleForm.grade,
					sub_id: this.ruleForm.subject,
					ver_id: this.ruleForm.edition,
					status: 1,
					app_code: this.CheckSchoolAppCode
				}
			];
		}
	},
	watch: {
		'ruleForm.material':{
			handler(a,b){
				this.$emit('changeArea',this.ruleForm)
			},immediate:true
		}	
	},
	methods: {
		getGrade() {
            this.ruleForm.subject = '';
            this.ruleForm.edition = '';
            this.ruleForm.material = '';
            this.subjectData = [];
            this.editionData = [];
            this.materialData = [];
			let success = res => {
                this.gradeData = res.data;
                this.ruleForm.grade = this.edit.grade ? this.edit.grade : '';
                this.getSubject();
                this.edit.grade = '';
			};
			this.$ajax({
				url: this.gradeUrl[this.inx],
				method: 'get',
				params: this.gradeParams[this.inx],
				func: { success: success }
			});
		},
		getSubject() {
            this.ruleForm.edition = '';
            this.ruleForm.material = '';
            this.editionData = [];
            this.materialData = [];
			let success = res => {
                this.subjectData = res.data;
                this.ruleForm.subject = this.edit.subject ? this.edit.subject : '';
                this.getEdition();
                this.edit.subject = '';
			};
			this.$ajax({
				url: this.subjectUrl[this.inx],
				method: 'get',
				params: this.subjectParams[this.inx],
				func: { success: success }
			});
		},
		getEdition() {
            this.ruleForm.material = '';
            this.materialData = [];
			let success = res => {
                this.editionData = res.data;
                this.ruleForm.edition = this.edit.edition ? this.edit.edition : '';
                this.getMaterial();
                this.edit.edition = '';
			};
			this.$ajax({
				url: this.editionUrl[this.inx],
				method: 'get',
				params: this.editionParams[this.inx],
				func: { success: success }
			});
		},
		getMaterial() {
			let success = res => {
                this.materialData = res.data;
                this.ruleForm.material = this.edit.material ? this.edit.material : '';
				this.edit.material = '';
			};
			this.$ajax({
				url: this.materialUrl[this.inx],
				method: 'get',
				params: this.materialParams[this.inx],
				func: { success: success }
			});
		},
		valid() {
			this.$refs.ruleForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
				}
            });
		},
		reset() {
			this.$refs.ruleForm.resetFields();
		},
		setDefault() {
			this.ruleForm = {
				grade: '',
				subject: '',
				edition: '',
				material: ''
			};
		}
	}
};
</script>
<style lang="scss">
	.test-area-form {
		width: 90%;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}
</style>
